<template>
  <scroll class="chat-list">
    <div>
      <ul>
        <li v-for="(item, index) in data" v-bind:key="index" @click="handleSelect(item)">
          <avatar-group :arr="[]" />
          <div>
            <p>{{item.name}}</p>
            <p class="item-msg">{{item.message}}</p>
          </div>
        </li>
      </ul>
    </div>
  </scroll>
</template>
<script>
import Scroll from '@/components/wrapScroll'
import AvatarGroup from '@/components/Base/Image/AvatarGroup.vue'
export default {
  name: 'ChatList',
  components: {
    Scroll,
    AvatarGroup
  },
  props: {
    data: Array
  },
  emits: ['select'],
  methods: {
    handleSelect(chat) {
      this.$emit('select', chat)
    }
  }
}
</script>
<style lang="scss" scoped>
.chat-list {
  position: relative;
  overflow: hidden;
  height: calc(100% - 64px);
}
li {
  color: $color-text-ll;
  font-size: 14px;
  padding: 12px 10px;
  line-height: 19px;
  border-bottom: 1px solid $color-background-d;
  .item-msg {
    font-size: 12px;
    color: $color-text-l;
  }
  &:first-of-type {
    border-top: 1px solid $color-background-d;
  }
  .avatar-wrapper {
    float: left;
    margin-right: 8px;
  }
}
</style>
